<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>学习官的那点事</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta name="csrf-token" content="{{csrf_token()}}">
    <script src="https://cdn.bootcss.com/jquery/3.0.0/jquery.min.js"></script>
    <!-- Latest compiled and minified CSS & JS -->
    <link rel="stylesheet" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="{{asset('StudyCenter/LessonsCenter.css')}}"/>
    <style>
        #bottom div.com_sub:last-child{
            border-bottom: 1px solid transparent !important;
        }
    </style>
</head>
<body>
<div id="box">
    <div id="top" style="margin-top: 30px">
        <div>
            {{str_limit($articleDetail['title'],30)}}
        </div>

        <div>
            <span class="looking_times">
                <img src="/images/StudyCenter/read.png" style="vertical-align: middle">
                {{$articleDetail['looking_times']}}
            </span>&nbsp;
            <span class="talking_times">
                <img src="/images/StudyCenter/talking.png" style="vertical-align: middle">
                {{$articleDetail['comment_times']}}
            </span>&nbsp;
            <span class="up_times">
                <img src="/images/StudyCenter/up.png" style="vertical-align: middle">
                {{$articleDetail['up_times']}}
            </span>
            <span class="publish_time">&nbsp;&nbsp;
                <span>发布时间:</span>
                <time>{{Carbon\Carbon::parse($articleDetail['created_at'])->toDateString()}}</time>
            </span>
        </div>

        <div>
            <span class="auther">作者:</span>
            <span class="name">{{$articleDetail['auther']}}</span>
        </div>

    </div>
    <div id="article" style="font-size: 18px">
        {{$articleDetail['body']}}
    </div>

    <div id="comment">
        <div id="comment_top">
            <div></div>
            <div>文章评论</div>
        </div>
        <div id="bottom">
            {{--显示评论--}}
            <div id="comment_box" style="height: auto;overflow: hidden;">
                @foreach($comments as $key=>$value)
                    {{--{{asset('images/default-images/default-head-img.jpg')}}--}}
                    <div class="show_comment" style="width: 100%;float: left;margin-bottom: 10px;overflow: hidden;" id="{{$value->id}}">
                        <div id="comment_user" onclick="showModal('modal-Topcomment-{{$value->id}}')">
                            <img src="{{$value->FilePath1}}" alt="">
                        </div>
                        <div id="comment_body">
                            <span style="font-size: 14px;line-height: 14px">{{str_limit($value->YourName,6)}}
                                <span style="font-size: 13px">{{\Carbon\Carbon::parse($value->created_at)->diffForHumans()}}</span>
                            </span>
                            <div style="font-size: 15px">
                                {{str_limit($value->body,60)}}
                            </div>
                        </div>
                        <div id="comment_like" onclick="userLike({{$value->id}})">
                            <img src="{{asset('images/up.png')}}">
                            <span id="like_{{$value->id}}">{{$value->up_times}}</span>
                        </div>
                    </div>

                    <div class="modal fade" id="modal-Topcomment-{{$value->id}}">
                        <div class="modal-dialog">
                            <div class="modal-content">
                                <div class="modal-header">
                                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                                        &times;
                                    </button>
                                    <h5 class="modal-title text-center">发表评论</h5>
                                </div>
                                <div class="modal-body">

                                    <div id="sub_comment_box"
                                         style="width: 100%;border: 1px solid grey;height: 65px;padding: 1px;border-radius: 3px">
                    <textarea name="" class="sub_comment-{{$value->id}}"
                              style="width: 100%;height: 60px;outline: none;border: none;resize: none;text-indent: 4px;font-size: 14px"></textarea>
                                    </div>

                                </div>
                                <div class="modal-footer">
                                    <button type="button" class="btn btn-info" data-dismiss="modal">关闭</button>
                                    <button type="button" class="btn btn-danger"
                                            onclick="userCommentSend('{{$value->id}}','{{$value->user_id}}','{{$value->lessons_id}}',2,1,'sub_comment-{{$value->id}}')">
                                        发表评论
                                    </button>
                                </div>
                            </div><!-- /.modal-content -->
                        </div><!-- /.modal-dialog -->
                    </div><!-- /.modal -->


                    @if(count($value->sub_comments))
                        @foreach($value->sub_comments as $kk=>$vv)
                            <div id="{{$vv->id}}" class="show_comment sub_com" style="width: 100%;float:left;background: #F8F8F8;overflow: hidden;@if($loop->last)border-bottom:none;@else border-bottom: 1px solid #E5E0E7;@endif">
                                <div id="comment_user" style=""
                                     onclick="showModal('modal-Subcomment-{{$vv->id}}')">
                                    <img src="{{$vv->FilePath1}}" alt="" style="width: 40px;height: 40px">
                                    {{--<span style="font-size: 14px;line-height: 14px">{{str_limit($vv->YourName,6)}}</span>--}}
                                </div>
                                <div id="comment_body">
                                    <div style="font-size: 14px">
                                        {{$vv->YourName}} <span
                                                style="color: orange;font-size:14px">@</span> {{$vv->replay_name}}
                                        <span style="font-size: 13px">{{\Carbon\Carbon::parse($vv->created_at)->diffForHumans()}}</span>
                                        <br>
                                        &nbsp;&nbsp;&nbsp;&nbsp;{{str_limit($vv->body,60)}}
                                    </div>
                                </div>
                                <div id="comment_like" onclick="userLike({{$vv->id}})">
                                    <img src="{{asset('images/up.png')}}" alt="">
                                    <span id="like_{{$vv->id}}">{{$vv->up_times}}</span>
                                </div>
                            </div>

                            <div class="modal fade" id="modal-Subcomment-{{$vv->id}}">
                                <div class="modal-dialog">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                                                &times;
                                            </button>
                                            <h5 class="modal-title text-center">发表评论</h5>
                                        </div>
                                        <div class="modal-body">

                                            <div id="sub_comment_box"
                                                 style="width: 100%;border: 1px solid grey;height: 65px;padding: 1px;border-radius: 3px">
                    <textarea name="" class="sub_comment-{{$vv->id}}"
                              style="width: 100%;height: 60px;outline: none;border: none;resize: none;text-indent: 4px;font-size: 14px"></textarea>
                                            </div>

                                        </div>
                                        <div class="modal-footer">
                                            <button type="button" class="btn btn-info" data-dismiss="modal">关闭</button>
                                            <button type="button" class="btn btn-danger"
                                                    onclick="userCommentSend('{{$vv->id}}','{{$vv->user_id}}','{{$vv->lessons_id}}',2,1,'sub_comment-{{$vv->id}}')">
                                                保存修改
                                            </button>
                                        </div>
                                    </div><!-- /.modal-content -->
                                </div><!-- /.modal-dialog -->
                            </div><!-- /.modal -->

                        @endforeach
                    @endif
                @endforeach
            </div>
            <br>
            {{--用户输入--}}
            <div id="user_input">
                <input id="CommentBody"
                       style="font-size: 15px;font-size: 15px;width: 75%;border: 1px solid grey;height: 40px;border-radius: 3px;outline: none"
                       resize="none" placeholder="请输入评论的内容...">
                <button id="user_send"
                        onclick="userCommentSend(0,0,'{{$articleDetail['id']}}',2,0)"
                        style="font-size: 15px;height: 38px;margin-top: 0px">发表
                </button>
            </div>
        </div>
    </div>

    <script>
        //显示模态框
        function showModal(str) {
            $('#' + str + '').modal('show');
        }

        //用户添加评论与回复
        function userCommentSend(pid, replay_user_id, lessons_id, type, is_sub, Contbody) {

//            console.info(pid, replay_user_id, lessons_id);
//            return false;
            if (is_sub == 0) {
                var CommentBody = $('#CommentBody').val();
            } else if (is_sub == 1) {
                var CommentBody = $('.sub_comment-' + pid + '').val();
            }

            var pid = pid;
            var replay_user_id = replay_user_id;
            var lessons_id = lessons_id;
            var type = type;
            var is_sub = is_sub;
            $.ajax({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                type: 'POST',
                url: '/wx-api/wxUserAddComment',
                data: {
                    "body": CommentBody,
                    "pid": pid,
                    "replay_user_id": replay_user_id,
                    "lessons_id": lessons_id,
                    "type": type,
                    "is_sub": is_sub
                },
                beforeSend: function () {
                    $('#user_send').text('发送中...').attr('disabled', 'disabled');
                },
                success: function (phpData) {
//                    console.error(phpData);
                    if (phpData.code == 200 && phpData.is_sub == 0) {
                        str = '';
                        $('#user_send').text('发表').removeAttr('disabled');
                        str += '<div class="show_comment" style="width: 100%;margin-bottom: 5px;overflow: hidden;" id="' + phpData.data.id + '">';
                        str += '<div id="comment_user" onclick="showModal(\'modal-Topcomment-' + phpData.data.id + '\')">';
                        str += '<img src="' + phpData.data.FilePath1 + '" alt=""></div>';
                        str += '<div id="comment_body" > <span style="font-size: 15px;line-height: 15px">' + (phpData.data.YourName).slice(0,3) + '<span style="font-size: 12px">' + phpData.data.show_time + '</span></span> <div style="font-size: 13px">' + phpData.data.body + '</div>';
                        str += '</div><div id="comment_like" onclick="userLike(' + phpData.data.id + ')">';
                        str += '<img src="{{asset('images/up.png')}}">';
                        str += '<div id="like_' + phpData.data.id + '">' + phpData.data.up_times + '</div></div></div>';

                        str += '<div class="modal fade" id="modal-Topcomment-' + phpData.data.id + '">';
                        str += '<div class="modal-dialog"><div class="modal-content"><div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button><h5 class="modal-title text-center">发表评论</h5></div><div class="modal-body">';
                        str += '<div id="sub_comment_box" style="width: 100%;border: 1px solid grey;height: 65px;padding: 1px;border-radius: 3px">';
                        str += '<textarea name="" class="sub_comment-' + phpData.data.id + '" style="width: 100%;height: 60px;outline: none;border: none;resize: none;text-indent: 4px;font-size: 14px"></textarea></div></div>';
                        str += '<div class="modal-footer">';
                        str += '<button type="button" class="btn btn-info" data-dismiss="modal">关闭</button>';
                        str += '<button type="button" class="btn btn-danger" onclick="userCommentSend(\'' + phpData.data.id + '\',\'' + phpData.data.user_id + '\',\'' + phpData.data.lessons_id + '\',2,1,\'sub_comment-' + phpData.data.id + '\')"> 保存修改</button></div></div></div></div>';
                        $('#comment_box').append(str);
                        $('.sub_comment-' + phpData.data.id + '').val('');
                        $('#modal-Topcomment-' + phpData.data.id + '').modal('hide')
                        str = '';
                        $('#CommentBody').val('');
                    }
                    else if (phpData.code == 200 && phpData.is_sub == 1) {
                        str = '';
                        $('#user_send').text('发表').removeAttr('disabled');
                        str += '<div class="show_comment com_sub" style="width: 100%;float: left;background: #F8F8F8;border-bottom: 1px solid #E5E0E7;overflow: hidden;" id="' + phpData.data.id + '">';
                        str += '<div id="comment_user" style="" onclick="showModal(\'modal-Subcomment-' + phpData.data.id + '\')">';
                        str += '<img src="' + phpData.data.FilePath1 + '" alt="" style="width: 40px;height: 40px">';
                        str += '</div>';
                        str += '<div id="comment_body"><div style="font-size: 14px">' + phpData.data.YourName + '<span style="color: orange;font-size: 14px">@</span>' + phpData.data.replayName +'<span style="font-size: 14px">' + phpData.data.show_time + '</span> <br/>' + phpData.data.body + '</div>';
                        str += '</div><div id="comment_like" onclick="userLike(' + phpData.data.id + ')">';
                        str += '<img src="{{asset('images/up.png')}}">';
                        str += '<span id="like_' + phpData.data.id + '">' + phpData.data.up_times + '</span></div></div>';

                        str += '<div class="modal fade" id="modal-Subcomment-' + phpData.data.id + '">';
                        str += '<div class="modal-dialog"><div class="modal-content"><div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button><h5 class="modal-title text-center">发表评论</h5></div><div class="modal-body">';
                        str += '<div id="sub_comment_box" style="width: 100%;border: 1px solid grey;height: 65px;padding: 1px;border-radius: 3px">';
                        str += '<textarea name="" class="sub_comment-' + phpData.data.id + '" style="width: 100%;height: 60px;outline: none;border: none;resize: none;text-indent: 4px;font-size: 14px"></textarea></div></div>';
                        str += '<div class="modal-footer">';
                        str += '<button type="button" class="btn btn-info" data-dismiss="modal">关闭</button>';
                        str += '<button type="button" class="btn btn-danger" onclick="userCommentSend(\'' + phpData.data.id + '\',\'' + phpData.data.user_id + '\',\'' + phpData.data.lessons_id + '\',2,1,\'sub_comment-' + phpData.data.id + '\')"> 保存修改</button></div></div></div></div>';

                        $('#' + phpData.pid + '').after(str);
                        $('.sub_comment-' + phpData.data.id + '').val('');
                        $('#modal-Subcomment-' + phpData.data.id + '').modal('hide')
                        $('#CommentBody').val('');
                        str = '';
                    }
                }
            })
        }

        //用户点赞
        function userLike(commentID) {
            var commentID = commentID;
            $.ajax({
                type: 'get',
                url: '/api/v4/change/up_times/2/' + commentID + "/{{$wxUserPhone}}",
                data: {},
                success: function (phpdata) {
                    if (phpdata.code == 200) {
                        var num = $(eval("'#like_" + commentID + "'")).text();
                        console.log(parseInt(num));
                        $(eval("'#like_" + commentID + "'")).text(parseInt(num) + Number(1));
                    } else if (phpdata.code == 201) {
                        var num = $(eval("'#like_" + commentID + "'")).text();
                        console.log(parseInt(num));
                        $(eval("'#like_" + commentID + "'")).text(parseInt(num) - Number(1));
                    }

//                    console.error(phpdata);
                }
            })
        }
    </script>
</div>

</body>
</html>
